<template>
  <div>
    <div v-if="appNames.length > 0">
      <List item-layout="vertical" style="max-height: 400px; overflow: auto">
        <ListItem v-for="item in appNames" :key="item.app_name">
          <el-row>
            <el-col :span="8">
              <div style="margin-left: 10px">
                <h4>
                  <svg-icon icon-class="appname" style="vertical-align: middle" />
                  <router-link class="link" :to="`/appid/${item.id}`">{{ item.appName }} </router-link>
                </h4>
              </div>
            </el-col>
            <el-col :span="8" style="vertical-align: middle">
              {{ item.appNameCn }}
            </el-col>
            <el-col :span="8">
              <span style="float: right">{{ item.appOwner }}</span>
            </el-col>
          </el-row>
        </ListItem>
      </List>
    </div>
    <div v-else>
      <p>暂无App Name关联到此Service</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AppNames',
  components: {},
  props: {
    appNames: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style lang='scs' scoped>
</style>
<style>
.title {
  display: block;
  border-top: 5px solid #969696;
  background-color: #76db95;
  height: 30px;
  line-height: 30px;
  padding: 4px 6px;
  font-size: 16px;
  color: #000000;
  margin-bottom: 13px;
  clear: both;
}
.title .date {
  float: right;
}
.title .name {
  float: left;
}
</style>
